<template>
	<view class="content">
    <div class="topInput">
      <u--form
        labelPosition="left"
        :model="deviceModel"
        :rules="rules"
        labelWidth="80px"
        ref="uForm"
      >
        <u-form-item
            label="设备名称"
            prop="userInfo.name"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="deviceModel.userInfo.name"
              border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="备注"
            prop="userInfo.remark"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="deviceModel.userInfo.remark"
              border="none"
          ></u--input>
        </u-form-item>
      </u--form>
    </div>
    <div class="MainBody">
      <div class="listArr" v-for="(item,index) in originArr" :key="item">
        <checkbox-group @change="changeInleftFun(index)">
          <checkbox :checked="item.isChecked"/>
        </checkbox-group>
        名称:{{ item.name }},类型:{{ item.deviceType === 0 ? '网关' : item.deviceType === 1 ? '温湿度' : item.deviceType === 2 ? '开关' : '土壤温湿度' }}
      </div>
    </div>
    <div class="middleBox">
      <div class="imgBox">
        <image src="@/static/up.png" v-show="toTopData.length <= 0" alt="" />
        <image src="@/static/upsure.png" @click="dataToTop(toTopData.length)" v-show="toTopData.length > 0" alt="" />
      </div>
      <div class="imgBox">
        <image src="@/static/updown.png" v-show="toDownData.length <= 0" alt="" />
        <image src="@/static/updownsure.png" @click="dataToDown(toDownData.length)" v-show="toDownData.length > 0" alt="" />
      </div>
    </div>
    <div class="MainBody">
      <div class="listArr" v-for="(item,index) in downStartData" :key="item">
        <checkbox-group @change="changeInRightFun(index)">
          <checkbox :checked="item.isChecked"/>
        </checkbox-group>
        名称:{{ item.name }},类型:{{ item.deviceType === 0 ? '网关' : item.deviceType === 1 ? '温湿度' : item.deviceType === 2 ? '开关' : '土壤温湿度' }}
      </div>
    </div>
    <view class="lastForSwitch">
      <view @click="submitSwitch">提交</view>
      <view @click="goback">返回上一页</view>
    </view>
	</view>
</template>

<script>
  import { timestampToDatetime } from '@/untils/index';
  import request from '@/request/api';
	export default {
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      },
      setPhone(val){
        return val.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
      }
		},
		data() {
			return {
        originArr: [],
        toDownData: [],
        toTopData: [],
        downStartData: [],
        deviceModel: {
          userInfo: {
            name: '',
            remark: '',
          },
        },
        rules: {
          'userInfo.name': {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
          },
        },
				messageObj:{}
			}
		},
    components: {
      
		},
		onLoad(e) {
      let res = JSON.parse(e.nullArr)
      this.originArr = res
		},
		methods: {
      dataToTop(val){
        if (val === 0) {
          return false
        } else {
          const nullArr = []
          for (const el of this.downStartData) {
            let flag = true
            for (const j of this.toTopData) {
              if (el.id === j.id) {
                flag = false
              }
            }
            if (flag) {
              nullArr.push(el)
            }
          }
          this.downStartData = nullArr
          for (const el of this.toTopData) {
            el.isChecked = false
            this.originArr.push(el)
          }
          this.toTopData = []
        }
      },
      dataToDown(val){
        if (val === 0) {
          return false
        } else {
          const nullArr = []
          for (const el of this.originArr) {
            let flag = true
            for (const j of this.toDownData) {
              if (el.id === j.id) {
                flag = false
              }
            }
            if (flag) {
              nullArr.push(el)
            }
          }
          this.originArr = nullArr
          for (const el of this.toDownData) {
            el.isChecked = false
            this.downStartData.push(el)
          }
          this.toDownData = []
        }
      },
      changeInRightFun(index){
        if (!this.downStartData[index].isChecked) {
          this.downStartData[index].isChecked = true
          if (this.toTopData.length > 0) {
            let tag = false
            for (const el of this.toTopData) {
              if (this.downStartData[index].id === el.id) {
                tag = true
                return false
              }
            }
            if (!tag) {
              this.toTopData.push(this.downStartData[index])
            }
            
          } else {
            this.toTopData.push(this.downStartData[index])
          }
        } else {
          this.downStartData[index].isChecked = false
          let recodeArr = []
          recodeArr = this.toTopData.filter(item => {
            return item.id !== this.toTopData[index].id
          })
          this.toTopData = recodeArr
        }
      },
      changeInleftFun(index){
        if (!this.originArr[index].isChecked) {
          this.originArr[index].isChecked = true
          if (this.toDownData.length > 0) {
            let tag = false
            for (const el of this.toDownData) {
              if (this.originArr[index].id === el.id) {
                tag = true
                return false
              }
            }
            if (!tag) {
              this.toDownData.push(this.originArr[index])
            }
            
          } else {
            this.toDownData.push(this.originArr[index])
          }
        } else {
          this.originArr[index].isChecked = false
          let recodeArr = []
          recodeArr = this.toDownData.filter(item => {
            return item.id !== this.originArr[index].id
          })
          this.toDownData = recodeArr
        }
      },
      goback(){
        uni.navigateBack()
      },
      submitSwitch(){
        this.$refs.uForm.validate().then(resLgo => {
          if (this.downStartData.length === 0) {
            uni.$u.toast('请先选择设备')
            return false
          } else {
            let deviceList = []
            for (const el of this.downStartData) {
              deviceList.push(el.id)
            }
            let obj = {
              url: '/deviceComponent/add',
              method: 'post',
              data: {
                componentName: this.deviceModel.userInfo.name,
                remark: this.deviceModel.userInfo.remark,
                deviceList
              }
            }
            request(obj).then(res => {
              if (res.code === '200') {
                uni.showToast({
                  title: '新增成功',
                  mask: true
                })
                this.goback()
              } else {
                uni.showToast({
                  title: res.message,
                  mask: true
                })
              }
            })
          }
        }).catch(errors => {
          uni.$u.toast('请填写设备名称')
        })
      }
		}
	}
</script>

<style lang="scss">
.listArr {
  width: 90%;
  height: 80rpx;
  display: flex;
  line-height: 80rpx;
}
.topInput {
  margin: 0 3% 20rpx 3%;
  width: 94%;
}
.MainBody {
  padding: 20rpx 2%;
  margin: 0 3% 20rpx 3%;
  width: 89%;
  height: calc(35vh - 40rpx);
  border: 1rpx solid #000;
  overflow-y: scroll;
}
.middleBox {
  width: 100%;
  display: flex;
  justify-content: center;
  .imgBox {
    width: 80rpx;
    height: 80rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  :nth-child(1) {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
  :nth-child(2) {
    width: calc(30% - 2rpx);
    height: calc(80rpx - 2rpx);
    line-height: 78rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid #909399;
    color: #000;
  }
}
</style>
